.app-layout {
  height: 100vh;
  background: url(./assets/bg.png) top/cover no-repeat;

  .xflow-header {
    position: relative;
    height: 65px;
    display: flex;
    justify-content: space-between;
    background: transparent;
    // background: url(./assets/nav.png) center/cover no-repeat ;
    width: 100%;
    z-index: 999;
    img {
      max-width: 100%;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }
  .xflow-head-left {
    color: #fff;
    width: 200px;
    z-index: 2;
  }
  .xflow-title {
    flex: 2;
    height: 100%;
    color: #fff;
    font-size: 30px;
    text-align: center;
    z-index: 2;
  }
  .xflow-head-right {
    color: #fff;
    width: 200px;
    z-index: 2;
    font-weight: bold;
  }

  .xflow-left {
    position: absolute;
    left: 20px;
    height: 100%;
    width: 12px;
    bottom: 0;
    // background: url(./assets/left.png) no-repeat;
    // background-position: 50%;
    img {
      max-width: 87%;
    }
  }
  .xflow-right {
    position: absolute;
    right: 20px;
    height: 100%;
    width: 12px;
    bottom: 0;
    img {
      max-width: 87%;
    }
  }
  .xflow-bottom {
    // position: absolute;
    left: 0px;
    height: 20px;
    width: 100%;
    bottom: 0;
    text-align: center;
    img {
      max-width: 96%;
    }
  }
}

.base-before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 40%;
  transform: translateY(40%);
  right: 18px;
  border-top: 5px solid #53dbf4;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.base-after {
  content: "";
  position: absolute;
  border-bottom-color: transparent;
}

.xflow-menu {
  display: flex;
  justify-content: center;
  height: 60px;
  margin-top: 10px;

  .ant-menu-horizontal {
    border-bottom: none !important;
  }

  .ant-menu {
    background: transparent;
    .ant-menu-overflow-item {
      color: #fff;
      background: url(./assets/menu-item.png) center/cover no-repeat;
      width: 212px;
      height: 54px;
      line-height: 54px;
      text-align: center;

      &:nth-child(2) {
        margin: 0 10px;
        &::before {
          .base-before;
        }
      }
      &:first-child {
        &::before {
          .base-before;
        }
      }
      &:hover {
        color: #fff !important;
        background: url(./assets/menu-item.png) center/cover no-repeat !important;
        &::after {
          .base-after;
        }
      }
      &::after {
        .base-after;
      }
    }
  }

  .ant-menu-submenu-title,
  .ant-menu-item-only-child {
    color: #fff !important;
    text-shadow: 0px 0px 8px #fff;
    font-weight: 400;
    font-size: 24px;
  }
  .ant-menu-item-only-child {
    &.ant-menu-item-selected {
      .ant-menu-title-content {
        color: #6ce6fc !important;
        text-shadow: 0px 0px 8px #6ce6fc;
        font-weight: 400;
        font-size: 24px;
      }
    }
  }
  .ant-menu-submenu-selected {
    .ant-menu-submenu-title {
      color: #6ce6fc !important;
      text-shadow: 0px 0px 8px #6ce6fc;
      font-weight: 400;
      font-size: 24px;
    }
  }
}

.ant-menu-vertical {
  background: rgba(0, 48, 93, 0.9) !important;
  border-image: linear-gradient(180deg, #00baff, #00baff) 10 10 !important;
}
.ant-menu {
  .ant-menu-item {
    color: #fff;

    &:hover {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
  .ant-menu-submenu-popup {
    .ant-menu-item-selected {
      background: transparent !important;
      color: #fff !important;
    }
  }
}

.x6-widget-stencil-group-title,
.x6-widget-stencil-title {
  display: none;
  height: 0 !important;
}
.x6-graph {
  height: 200px;
}
.com-content {
  .ant-collapse-header {
    padding: 5px !important;
  }
  .ant-collapse-content-box {
    padding: 0 !important;
  }
}
.x6-widget-stencil-group.collapsed {
  max-height: none;
}


.ant-typography{
  color: #3CBDD7!important;
}


.close-window  {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}